<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="app" value="/display/tab" is-telescreen />

    <main-content>
      <n-space>
        <n-h2>标签名称</n-h2>
        <n-input round placeholder="请输入名称" style="width: 300px;">
          <template #suffix>
            <n-icon :component="Search" />
          </template>
        </n-input>
        <n-h2>标签类型</n-h2>
        <n-input round placeholder="请输入类型" style="width: 300px;">
          <template #suffix>
            <n-icon :component="Search" />
          </template>
        </n-input>
        <n-button type="primary" class="absolute right-0" >
          创建标签
        </n-button>
      </n-space>
      <n-data-table v-model:checked-row-keys="checkedRowKeys"
                    :columns="columns"
                    :data="data"
                    :pagination="pagination"
                    :on-update:page="pageUpdate"/>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@vicons/ionicons5'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider,NDataTable,NSpace,NButton,NInput,NIcon,NH2,DataTableColumns} from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'


const pagination = {
  pageSize: 3
}

const checkedRowKeys = ref<Array<string | number>>([])

  type RowData = {
    key: number,
    name: string,
    type: string,
    sum: string,
    number:string,
    renew:string,
    fact:string,
    master:string,
    time:string,
    make:string
}

async function pageUpdate(value) {
  
}

const columns : DataTableColumns<RowData> = [
        {
          type: 'selection',
          options: [
            'all',
            'none',
          ]
        },
        {
          title: '标签名称',
          key: 'name'
        },
        {
          title: '标签类型',
          key: 'type'
        },
        {
          title: '标签覆盖人数',
          key: 'sum'
        },
        {
          title: '标签值',
          key: 'number'
        },
        {
          title: '更新方式',
          key: 'renew'
        },
        {
          title: '标签状态',
          key: 'fact'
        },
        {
          title: '创建人',
          key: 'master'
        },
        {
          title: '创建时间',
          key: 'time'
        },
        {
          title: '操作',
          key: 'make'
        }
      ]
 const  data= [
        {
          key: 0,
          name: '07akioni',
          type: '字符串',
          sum: '1564',
          number:'200',
          renew:'自动',
          fact:'正常',
          master:'管理员',
          time:'2023-2-15',
          make:'详情|更多'
        },
        {
          key:1
        }
      ]
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
